<template>
    <el-input v-model="searchData.username" style="width: 240px" placeholder="请输入用户名"/>
    <el-button type="primary" plain @click="btnSearch" style="margin-left:5px">查询</el-button>
    <el-button type="danger" plain @click="cleanSearch" style="margin-left:5px">清空</el-button>
    <el-table :data="tableData" style="width: 100%">
        <el-table-column fixed prop="uid" label="用户ID" width="250" />
        <el-table-column prop="username" label="用户名" width="250" />
        <el-table-column prop="role" label="角色" width="250">
            <template #default="scope">
                <el-tag :type="scope.row.role === 0 ? 'danger':(scope.row.role === 1?'primary':'success')" disable-transitions>{{ scope.row.role === 0 ? '游客':(scope.row.role === 1?'超级管理员':'酒店管理员') }}</el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="phone" label="电话" width="200" />
        <el-table-column prop="email" label="邮箱" width="200" />
        <el-table-column fixed="right" label="操作" width="250">
            <template #default>
                <el-button link type="primary" size="large">修改</el-button>
                <el-button link type="primary" size="large">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination 
        background  
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[3, 5, 10, 12]"
        :total="total"
        v-model:current-page="searchData.current"
        v-model:page-size="searchData.pagesize" 
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        />
</template>

<script lang="ts" setup>
import { getRequest } from '../../../api/axiosRequest';
import { ref, reactive, onMounted } from 'vue';
// 表格数据总数
const total = ref(0);
// const currentPage = ref(1)
// const pageSize = ref(5)
// 表格数据，这里暂且使用静态数据
const tableData = ref([
    {
        uid: '',
        username: '',
        role: '',
        phone: '',
        email: '',
    },
])
// searchData-向后端分页查询的对象，即当前页和每页总数
// searchData-向后端分页查询的对象，即当前页和每页总数
const searchData = reactive({
    username: null,
    current: 1, // 初始化当前页为1
    pagesize: 5, // 初始化每页显示10条
});

// 根据名字模糊查找用户
function btnSearch() {
    getUserList()
}

// 清空搜索条件
function cleanSearch() {
    searchData.username = null
    getUserList()
}

// 分页页码改变时触发
const handleCurrentChange = (newPage) => {
    console.log(newPage);
    searchData.current = newPage;
    getUserList(); // 调用方法获取新数据
};

const handleSizeChange = (newPage) => {
    console.log(newPage);
    searchData.pagesize = newPage
    getUserList(); // 调用方法获取新数据
}

function getUserList() {
    const param = {
        username: searchData.username,
        CurrentPage: searchData.current,
        PageSize: searchData.pagesize
    };
    console.log("searchData.current:"+ searchData.current);
    console.log("searchData.pagesize:"+ searchData.pagesize);

    getRequest('/user/getUserList', {
        params: param
    }).then((res => {
        tableData.value = []; // 在获取新数据前先清空已有数据
        console.log(res);
        const result = res.data.data;
        const tempData = result.rows; 
        total.value = result.total; //18
        console.log("result.total:" + result.total);
        tableData.value = tempData
    }))
}

onMounted(async () => {
    await getUserList()
})
</script>